<template>
    <el-dialog title="付款11" :close-on-click-modal="false" append-to-body :visible.sync="visibleOne" lock-scroll
        width="800px" custom-class="inner-dialog">
        <el-form ref="elForm" :model="dataForm" label-width="120px" label-position="right">
            <el-col :span="24">
                <el-form-item label="" label-width="5px">
                    <template>
                        <el-descriptions class="margin-top" title="" :column="4" size="mini" border>
                            <el-descriptions-item>
                                <template slot="label">
                                    计划名称
                                </template>
                                {{ form.planName }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    应付比例
                                </template>
                                {{ form.paymentRatio }}%
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    应付金额
                                </template>
                                {{ form.paymentAmount }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    已付金额
                                </template>
                                {{ form.amountPaid }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </template>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="收款单位">
                    <el-input v-model="dataForm.payee" placeholder="" disabled />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="收款账号">
                    <el-input v-model="dataForm.receivingAccount" placeholder="" disabled />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="付款账户">
                    <el-input v-model="dataForm.nickName" placeholder="" disabled />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="付款账号">
                    <el-input v-model="dataForm.paymentAccount" placeholder="" disabled />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="付款金额">
                    <el-input v-model="dataForm.amountPaid" placeholder="请输入付款金额" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="付款时间">
                    <el-date-picker clearable v-model="dataForm.createTime" type="date"
                        value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择付款时间" style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="操作人员">
                    <el-input v-model="dataForm.createBy" placeholder="" disabled />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="备注">
                    <el-input v-model="dataForm.remark" placeholder="请输入终止原因" />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="付款凭证">
                    <!-- paymentVoucher -->
                    <el-upload class="upload-demo" :action="uploadUrl" :before-remove="beforeRemove" multiple
                        :limit="10" :file-list="fileList" :on-success="handleFileSuccess"
                        :before-upload="beforeAvatarUpload">
                        <el-button size="small" type="primary">上传文件</el-button>
                        <div slot="tip" class="el-upload__tip">
                            支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过20MB
                        </div>
                    </el-upload>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item>
                    <div class="btnPoSty">
                        <el-button @click="visibleOne = false">取消</el-button>
                        <el-button type="primary" @click="subPayment">确定</el-button>
                    </div>
                </el-form-item>
            </el-col>

        </el-form>

    </el-dialog>
</template>
<script>
import { getPaymentPlan, getUpAnnex, saveUpAnnex, deleteAnnex, getReceiptPaymentInfo, putPayment, getAnnexListById } from "@/api/contract/contractOrg";
import { getInfo } from "@/api/login.js"
export default {
    props: {},
    data() {
        return {
            visibleOne: false,
            detailVisible: false,
            loading: false,
            dataForm: {},
            form: {},
            num: '',
            // 上传参数
            uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
            fileList: [],
            uploadList: []
        };
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {
        init(row, list) {
            this.form.planName = list.planName
            this.form.paymentRatio = list.paymentRatio
            this.form.paymentAmount = list.paymentAmount
            this.form.amountPaid = list.amountPaid
            this.dataForm = row
            this.fileList = []
            getAnnexListById(row.id).then(res => {
                for (let i = 0; i < res.data.length; i++) {
                    this.fileList.push({
                        name: res.data[i].fileName,
                        url: res.data[i].filePath,
                        id: res.data[i].id
                    })
                }
            })
            this.$nextTick(() => {
                this.visibleOne = true;
            });
        },
        // 移除上传
        beforeRemove(file, fileList) {
            if (file.status == 'success') {
                deleteAnnex(file.id).then(res => {
                    this.$modal.msgSuccess(res.msg);
                })
            }
            this.uploadList = fileList
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.uploadList = fileList
        },
        // 文件上传前的大小
        beforeAvatarUpload(file) {
            const isRAR = file.type === 'application/x-rar-compressed';
            const isZIP = file.type === 'application/zip';
            const isMSOffice = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || // .docx  
                file.type === 'application/vnd.ms-word' || // .doc  
                file.type === 'application/pdf'; // .pdf  
            const isAccepted = isRAR || isZIP || isMSOffice;
            const isLt2M = file.size / 1024 / 1024 < 20;
            if (!isAccepted) {
                this.$message.error('上传文件格式不正确，请上传 .rar、.zip、.doc、.docx 或 .pdf 格式的文件！');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 20MB!');
            }
            return isAccepted && isLt2M;
        },
        saveContract() {
            // 保存附件
            if (this.uploadList.length) {
                let annexList = []
                for (let i = 0; i < this.uploadList.length; i++) {
                    if (this.uploadList[i].response) {
                        annexList.push({
                            fileName: this.uploadList[i].name,
                            filePath: this.uploadList[i].response.fileName,
                            type: 2,
                            dataId: this.dataForm.id
                        })
                    } else {
                        annexList.push({
                            fileName: this.uploadList[i].name,
                            filePath: this.uploadList[i].url,
                            type: 2,
                            dataId: this.dataForm.id
                        })
                    }
                }
                saveUpAnnex({ contractId: this.dataForm.contractId, annexList }).then(res => {
                    // let ids = []
                    // for (let i = 0; i < res.data.length; i++) {
                    //     ids.push(res.data[i].id)
                    // }
                    // this.dataForm.paymentVoucher = ids.join(',')
                })
            } else {
                // this.dataForm.paymentVoucher = null
            }
            this.$nextTick(() => {
                this.$confirm('确定修改付款记录吗？', '提示', { type: 'warning' }).then(() => {
                    putPayment({ ...this.form, ...this.dataForm }).then(res => {
                        this.$modal.msgSuccess(res.msg);
                        this.$emit('refreshPaymentOne')
                    })
                })
            })
        },
        subPayment() {
            this.saveContract()
        }
    },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
    // min-height: 600px;
    height: 90vh;
    overflow-y: auto;
}


.btnPoSty {
    position: absolute;
    right: 0;
    padding-bottom: 20px;


}
</style>